<template>
    <div class="wrap" v-show="show">
        <m_block-index-nav-bar title="选择经办人" v-if="false"/>
        <van-nav-bar
                title="选择经办人"
                left-text="返回"
                left-arrow
                @click-left="back"
                :fixed="true"
        />
        <van-index-bar class="list">
            <template v-for="(v,k) in options" v-if="v.length">
                <van-index-anchor :index="k"  class="cool"/>
                <van-cell :title="vv.utname" v-for="vv in v" size="large" @click="setSelected(vv)">
                    <template #default>
                        <van-icon name="success" v-if="selected[vv.uid]" />
                    </template>
                </van-cell>
            </template>
        </van-index-bar>
    </div>
</template>

<script>
    import {makePy} from "../lib/py"
    import M_blockIndexNavBar from "./m_blockIndexNavBar";

    export default {
        name: "choose_user",
        components: {M_blockIndexNavBar},
        data(){
            return {
                show: false,
                options:{},
                selected:{},
                isMain: false,
                all: []
            }
        },
        methods:{
            back(){
                this.show = false
                this.$emit("ok", {
                    selected: this.all.filter(e => this.selected[e.uid]),
                    isMain: this.isMain
                })
                // this.$router.go(-1)
            },
            load(all, selected, justone){
                this.all = all;
                //按首字母分组
                var group = {}
                "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split("").forEach(e => {
                    group[e] = []
                });
                all.forEach(e => {
                    var letter = makePy(e.utname)[0].substring(0,1).toUpperCase();//[0].toUpperCase()
                    var gp = group[letter] || group["#"];
                    gp.push(e);
                });
                console.log(selected)
                this.options = group;
                //标记已选中
                this.selected = {}
                selected.forEach(e => this.$set(this.selected, e.uid, true))
                this.show = true
                this.isMain = justone
            },

            isSelected(vv){
                return this.selected[vv.uid]
            },

            setSelected(vv){
                //只有一个主办人
                if(this.isMain){
                    this.selected = {
                        [vv.uid]: true
                    }
                } else {
                    this.$set(this.selected, vv.uid, !this.selected[vv.uid])
                    console.log(this.selected)
                }
            }
        }
    }
</script>

<style scoped>
    .wrap{
        width: 100vw;
        min-height: 100vh;
        position: absolute;
        background: white;
        left: 0;
        top: 0;
        z-index: 10000;
        padding-top: 46px;
        box-sizing: border-box;
    }
    .van-cell{
        text-align: left;
    }
    .cool {
        text-align: left;
        background: #f7f8fa;
    }
</style>
